<template>
   <view class="uv-page">
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">基本案例</text>
         <view class="uv-page__slide-item">
            <uv-slider v-model="value1"></uv-slider>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义范围(0—50)</text>
         <view class="uv-page__slide-item">
            <uv-slider v-model="value2" showValue min="0" max="50"></uv-slider>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">指定步长(每次步进5)</text>
         <view class="uv-page__slide-item">
            <uv-slider v-model="value3" :step="5"></uv-slider>
         </view>
      </view>
      <view class="uv-demo-block">
         <text class="uv-demo-block__title">自定义样式</text>
         <view class="uv-page__slide-item">
            <uv-slider v-model="value4" activeColor="#deab8a" blockColor="#f47920"></uv-slider>
         </view>
      </view>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value1 = ref(30);
const value2 = ref(30);
const value3 = ref(30);
const value4 = ref(30);
</script>

<style lang="scss" scoped></style>
